<template>
	<view class="after">
		<view class="shop">
			<image :src="detailData.image" class="imgthumb" />
			<view class="text">
				<p class="title">{{detailData.goodsName}}</p>
				<view class="trait">颜色：{{ detailData.color }}</view>
				<view class="trait">尺寸：{{ detailData.size }}</view>
			</view>
		</view>
		<template v-if="text == '退款'">
			<view class="cut-off"></view>
			<view class="refund">
				<text>退款金额：</text>
				<text class="price">¥ {{detailData.orderPrice}}</text>
			</view>
		</template>
		<view class="cut-off"></view>
		<view class="input">
			<view class="list ">
				<text>{{ text }}原因：</text>
				<!-- <cube-select v-model="value" :options="options"></cube-select> -->
				<picker @change="bindPickerChange" :value="options_index" :range="options" mode="selector" class="picker">
					<view class="uni-input">{{ options[options_index] }}</view>
				</picker>
			</view>
			<view class="list ">
				<text>{{ text }}说明：</text>
				<input v-model="value" class="input" placeholder="请输入内容" />
			</view>
			<view class="up-img">
				<p>上传图片（限3张）</p>
				<view class="up-ul">
					<view class="up-li" v-for="(item, index) in img_list" :key="index">
						<image :src="item" mode="" />
						<uni-icons type="clear" size="24" class="topright" color="#999" @click="removerimg(index)" />
					</view>
					<view class="up-li" @click="findimg()"><text>+</text></view>
				</view>
			</view>
		</view>
		<view class="button" @click="submit">提 交</view>
	</view>
</template>

<script>
	import list from '../../../servers/order/list.js';
	export default {
		data() {
			return {
				text: '退款',
				options: [],
				options_index: 0,
				value: '',
				img_list: [],
				detailData:'',
				reason:'',
				type:''
			};
		},
		module() {
			uni.setNavigationBarTitle({
				title: '申请' + text
			});
		},
		created() {
			this.ininData();
		},
		onLoad(option) {
			if (option.item) {
				this.detailData=JSON.parse(option.item)
				
			}
			if(option.num){
				option.num==2?this.text='换货':this.text='退款'
				this.type=option.num
			}
			console.log(this.detailData)
		},
		
		methods: {
			// 退回原因
			ininData() {
				var obj1 = new Object();
				obj1.dictGroupCode = 'returnsReason';
				list
					.getDictByCode(obj1)
					.then(res => {
						res.data.map(v => {
							this.options.push(v.dictValueDesp);
						});
						// this.afterSaleType =this.array[this.index].value;
						this.reason = this.options[0];
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});


			},
			// 提交
			submit() {
				var obj={
					imgs:this.img_list,
					orderId:this.detailData.orderId,
					productId:this.detailData.orderGoods[0].productId,
					applyReason:this.reason,
					reasonDesp:this.value,
					afterSaleType:this.type
				}
				console.log(obj)
				list
					.save(obj)
					.then(res => {
						if(res.code==200){
							uni.showToast({
								title:res.msg
							})
							setTimeout(function() {
								uni.redirectTo({
									url: '/pages/shop/order/list'
								});
							}, 2000);
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
						
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			},
			findimg() {
				var that = this;
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.img_list = that.img_list.concat(res.tempFilePaths);
						console.log(JSON.stringify(res.tempFilePaths));
						uni.uploadFile({
							url: that.upFileUrl, //上传地址
							filePath: that.img_list[0], //上传图片本地地址
							name: 'file',
							formData: {
								user: 'test'
							},
							success: uploadFileRes => {
								that.upimg_list.push(uploadFileRes.msg); //返回线上图片地址
							}
						});
					}
				});
			},

			removerimg(e) {
				this.img_list.splice(e, 1);
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value);
				this.options_index = e.target.value;
				this.reason=this.options[e.target.value]
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		background: #ffffff;
	}

	.after {
		height: 100%;
		background: #fff;

		.shop {
			padding: 20rpx;
			display: flex;

			image {
				width: 200rpx;
				height: 200rpx;
				
			}

			.text {
				margin-left: 20rpx;
				line-height: 44rpx;

				.title {
					font-size: 28rpx;
					height: 88rpx;
					margin-bottom: 10rpx;
				}

				.trait {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.refund {
			line-height: 106rpx;
			font-size: 28rpx;
			padding: 0 20rpx;

			.price {
				font-size: 32rpx;
				color: #bd3c8c;
			}
		}

		.input {
			padding: 0 20rpx;

			.list {
				font-size: 28rpx;
				line-height: 50rpx;
				padding: 31rpx 0;
				border-bottom: 1rpx solid #e1e1e1;
				/*no*/
				display: flex;

				.picker,
				.input,
				view {
					flex: 1;
					font-size: 18rpx;
					line-height: 50rpx;
					height: 50rpx;
				}

				.picker {
					padding: 0 18rpx;
				}
			}

			.up-img {
				padding: 40rpx 0;

				.up-ul {
					overflow: hidden;
					margin-top: 31rpx;

					.up-li {
						position: relative;
						float: left;
						width: 189rpx;
						height: 189rpx;
						border: 1rpx dashed #e1e1e1;
						/*no*/
						text-align: center;
						line-height: 189rpx;
						font-size: 60rpx;
						color: #e1e1e1;
						font-weight: 100;
						margin-right: 20rpx;

						image {
							width: 189rpx;
							height: 189rpx;
						}

						.topright {
							position: absolute;
							top: 5rpx;
							right: 5rpx;
							line-height: 50rpx;
						}
					}
				}
			}
		}

		.button {
			line-height: 90rpx;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			text-align: center;
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
			margin: 30rpx 34rpx 67rpx;
			box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
		}
	}
</style>
<style>
	.after .cube-select::after,
	.after .cube-input::after {
		border: none;
	}
</style>
